<template>
  <div class="box">
    <!-- 头部商机列表 -->
    <div class="boxtop">
      <van-nav-bar title="商机列表" left-arrow>
        <template #right>
          <van-icon name="search" color="#fff" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 搜索栏 -->
    <div class="searchbox">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        input-align="center"
      />
    </div>
    <!-- tab栏 -->
    <van-tabs
      v-model="activeName"
      @change="changeTabs"
      title-active-color="#df4750"
      color="#243865"
    >
      <!-- 待跟进的tab页面 -->
      <!-- :badge="titleDot" -->
      <van-tab title="待跟进" name="1">
        <!-- list列表 -->
        <!-- 下拉刷新 -->
        <van-pull-refresh
          :success-text="refreshSuccessText"
          :success-duration="1500"
          v-model="laRdfer"
          @refresh="onRefresh"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset="300"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
          >
            <!-- <van-cell v-for="(item,index) in list" :key="index" :title="item.mobile" /> -->
            <div v-for="(item, index) in list" :key="index">
              <van-collapse v-model="activeNames">
                <van-collapse-item :name="index" icon="notes-o">
                  <template #title>
                    <div @click="waitClick(item.businessId, item.custIntentId)">
                      <span class="dataspan">{{
                        item.createDate | dateFormat
                      }}</span>
                      <!-- 红色的圆圈 -->
                      <div class="Textcritil" v-if="item.isFlag == '是'"></div>
                      <span
                        class="reminder"
                        v-if="
                          item.isFlag == '是' && item.planFollowupDate !== ''
                        "
                        >上次时间跟进：{{
                          item.planFollowupDate | dateFormat
                        }}</span
                      >
                      <span class="reminder" v-else-if="item.isFlag == '否'"
                        >下次时间跟进：{{
                          item.planFollowupDate | dateFormat
                        }}</span
                      >
                      <span v-else>{{
                        item.planFollowupDate | dateFormat
                      }}</span>
                    </div>
                    <div>
                      <span class="CarNumber">{{ item.plateNumber }}</span>
                      <span class="Carname"
                        >{{ item.name }}({{ item.sex }})</span
                      >
                    </div>
                  </template>
                  <van-field
                    v-model="item.mobile"
                    type="tel"
                    label="手机号"
                    readonly
                  >
                    <template #button>
                      <van-icon
                        name="phone-o"
                        color="#1989fa"
                        @click="clickphone(item.mobile)"
                      />
                    </template>
                  </van-field>
                  <van-field v-model="item.modelName" label="车型" readonly />
                  <van-field v-model="item.vin" label="VIN码" readonly />
                  <van-field
                    v-model="item.registerDate"
                    label="上牌时间"
                    readonly
                  />
                </van-collapse-item>
              </van-collapse>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="已检测" name="2">
        <van-pull-refresh
          :success-text="refreshSuccessText"
          :success-duration="1500"
          v-model="laRdfer"
          @refresh="onRefresh"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset="300"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
          >
            <div v-for="(item, index) in list" :key="index">
              <van-collapse v-model="activeNames">
                <van-collapse-item :name="index" icon="notes-o">
                  <template #title>
                    <div @click="clickSigned(item)">
                      <span class="dataspan">{{
                        item.createDate | dateFormat
                      }}</span>
                      <!-- 红色的圆圈 -->
                      <div class="Textcritil" v-if="item.isFlag == '是'"></div>
                      <span
                        class="reminder"
                        v-if="
                          item.isFlag == '是' && item.planFollowupDate !== ''
                        "
                        >上次时间跟进：{{
                          item.planFollowupDate | dateFormat
                        }}</span
                      >
                      <!-- <span
                        class="reminder"
                        v-else-if="
                          item.isFlag == '否' && item.planFollowupDate !== ''
                        "
                        >下次时间跟进：{{
                          item.planFollowupDate | dateFormat
                        }}</span
                      >
                      <span v-else>{{
                        item.planFollowupDate | dateFormat
                      }}</span> -->
                    </div>
                    <div>
                      <span class="CarNumber">{{ item.plateNumber }}</span>
                      <span class="Carname"
                        >{{ item.name }}({{ item.sex }})</span
                      >
                    </div>
                  </template>
                  <van-field
                    v-model="item.mobile"
                    type="tel"
                    label="手机号"
                    readonly
                  >
                    <template #button>
                      <van-icon
                        name="phone-o"
                        color="#1989fa"
                        @click="clickphone(item.mobile)"
                      />
                    </template>
                  </van-field>
                  <van-field v-model="item.modelName" label="车型" readonly />
                  <!-- v-model="
                      item.facadeGrade +
                      item.performanceGrade +
                      item.safetyGrade +
                      item.trimGrade
                    " -->
                  <van-field label="车况等级" readonly />
                  <van-field v-model="item.evaPrice" label="评估价" readonly />
                  <van-field
                    v-model="item.custExpPrice"
                    label="客户期望价格"
                    readonly
                  />
                  <van-field v-model="item.evaDate" label="评估时间" readonly />
                  <van-field
                    v-model="item.validityDate"
                    label="有效期至"
                    readonly
                  />
                  <van-row>
                    <van-col offset="17" span="7">
                      <van-button
                        round
                        type="info"
                        size="mini"
                        style="background-color: #4397d4"
                        >查看评估报告</van-button
                      >
                    </van-col>
                  </van-row>
                </van-collapse-item>
              </van-collapse>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <!-- :badge="titleDot" -->
      <van-tab title="已签约" name="3">
        <van-pull-refresh
          :success-text="refreshSuccessText"
          :success-duration="1500"
          v-model="laRdfer"
          @refresh="onRefresh"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset="300"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
          >
            <!-- <van-cell v-for="(item,index) in list" :key="index" :title="item.mobile" /> -->
            <div v-for="(item, index) in list" :key="index">
              <van-collapse v-model="activeNames">
                <van-collapse-item :name="index" icon="notes-o">
                  <template #title>
                    <div>
                      <span class="dataspan">{{
                        item.createDate | dateFormat
                      }}</span>
                      <!-- 红色的圆圈 -->
                      <div class="Textcritil" v-if="item.isFlag == '是'"></div>
                      <span
                        class="reminder"
                        v-if="
                          item.isFlag == '是' && item.planFollowupDate !== ''
                        "
                        >上次时间跟进：{{
                          item.planFollowupDate | dateFormat
                        }}</span
                      >
                    </div>
                    <div>
                      <span class="CarNumber">{{ item.plateNumber }}</span>
                      <span class="Carname"
                        >{{ item.name }}({{ item.sex }})</span
                      >
                    </div>
                  </template>
                  <van-field
                    v-model="item.mobile"
                    type="tel"
                    label="手机号"
                    readonly
                  >
                    <template #button>
                      <van-icon
                        name="phone-o"
                        color="#1989fa"
                        @click="clickphone(item.mobile)"
                      />
                    </template>
                  </van-field>
                  <van-field v-model="item.modelName" label="车型" readonly />
                  <!-- v-model="
                      item.facadeGrade +
                      item.performanceGrade +
                      item.safetyGrade +
                      item.trimGrade
                    " -->
                  <van-field label="车况等级" readonly />
                  <van-field
                    v-model="item.evaPrice"
                    label="精准估价"
                    readonly
                  />
                  <van-field
                    v-model="item.custExpPrice"
                    label="客户期望价格"
                    readonly
                  />
                  <van-field
                    v-model="item.finishPurchPrice"
                    label="签约价格"
                    readonly
                  />
                  <van-row>
                    <van-col offset="17" span="7">
                      <van-button
                        round
                        type="info"
                        size="mini"
                        style="background-color: #4397d4"
                        >查看评估报告</van-button
                      >
                    </van-col>
                  </van-row>
                </van-collapse-item>
              </van-collapse>
            </div>
          </van-list>
        </van-pull-refresh>
        <!-- <van-collapse v-model="activeNameTabB" accordion >
      <van-collapse-item name="1" icon="notes-o" >
        <template #title >
            <div @click="clickcontract">
              <span class="dataspan">2021-08-19</span>
            </div>
          <div>
            <span class="CarNumber">沪BW6423</span>
            <span class="Carname">桑榆(先生)</span>
          </div>
        </template>
       <van-field v-model="titleNmae.phone" type="tel" placeholder="请输入手机号" label="手机号" >
          <template #button>
            <van-icon name="phone-o" color="#1989fa" @click="clickphone" />
          </template>
       </van-field>

        <van-field v-model="titleNmae.carname" label="车型" placeholder="请输入(必填)" />

        <van-field  v-model=" titleNmae.carVIN"  label="车况等级"    placeholder="请输入VIN" />
        <van-field v-model=" titleNmae.carname" label="评估价" placeholder="请选择" />
        <van-field v-model=" titleNmae.carname" label="客户期望价格" placeholder="请选择" />
        <van-field v-model=" titleNmae.carname" label="评估时间" placeholder="请选择" />
        <van-field v-model=" titleNmae.carname" label="有效期至" placeholder="请选择" />
        <van-row>
          <van-col offset="17" span="7">
            <van-button round type="info" size="mini" @click="clickSigned">查看评估报告</van-button>
          </van-col>
        </van-row>
      </van-collapse-item>

      <van-collapse-item name="2" icon="notes-o" >
        <template #title>
            <div>

              <span class="dataspan">2021-08-19</span>
              <span class="reminder" >剩余一天评估价格即将失效</span>
            </div>
          <div>
            <span class="CarNumber">沪BW6423</span>
            <span class="Carname">无锡(先生)</span>
          </div>
        </template>

       <van-field v-model="titleNmae.phone" type="tel" placeholder="请输入手机号" label="手机号" >
          <template #button>
            <van-icon name="phone-o" color="#1989fa" @click="clickphone" />
            </template>
       </van-field>

        <van-field v-model="titleNmae.carname" label="客户名称" placeholder="请输入(必填)" />

        <van-field  v-model=" titleNmae.carVIN"  label="VIN码"    placeholder="请输入VIN" />

        <van-field v-model=" titleNmae.carname" label="上牌时间" placeholder="请选择" />
      </van-collapse-item>

      <van-collapse-item name="3" icon="notes-o" >
        <template #title>
            <div>

              <span class="dataspan">2021-08-19</span>
              <span class="reminder" >评估失效</span>
            </div>
          <div>
            <span class="CarNumber">沪BW6423</span>
            <span class="Carname">陈梦琪</span>
          </div>
        </template>

       <van-field v-model="titleNmae.phone" type="tel" placeholder="请输入手机号" label="手机号" >
          <template #button>
            <van-icon name="phone-o" color="#1989fa" @click="clickphone" />
            </template>
       </van-field>

        <van-field v-model="titleNmae.carname" label="客户名称" placeholder="请输入(必填)" />

        <van-field  v-model=" titleNmae.carVIN"  label="VIN码"    placeholder="请输入VIN" />

        <van-field v-model=" titleNmae.carname" label="上牌时间" placeholder="请选择" />
      </van-collapse-item>

      <van-collapse-item name="4" icon="notes-o" >
        <template #title>
            <div>

              <span class="dataspan">2021-08-19</span>
              <span class="reminder" >有效值：2021-09-18</span>
            </div>
          <div>
            <span class="CarNumber">沪BW6423</span>
            <span class="Carname">陈梦琪</span>
          </div>
        </template>

       <van-field v-model="titleNmae.phone" type="tel" placeholder="请输入手机号" label="手机号" >
          <template #button>
            <van-icon name="phone-o" color="#1989fa" @click="clickphone" />
            </template>
       </van-field>

        <van-field v-model="titleNmae.carname" label="客户名称" placeholder="请输入(必填)" />

        <van-field  v-model=" titleNmae.carVIN"  label="VIN码"    placeholder="请输入VIN" />

        <van-field v-model=" titleNmae.carname" label="上牌时间" placeholder="请选择" />
      </van-collapse-item>

      <div class="boxXian">
        <div class="boxNier" >

           <van-icon color="#64b5f6"  class="plus" name="plus" size="50" />
        </div>
      </div>

    </van-collapse> -->
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { goodlist } from '@/api/user'
export default {
  data() {
    return {
      // 搜索栏绑定得值
      value: '',
      activeName: 'a',
      activeNameTab: '1',
      // 小红点标记
      titleDot: 0,
      // 标题里面的内容
      titleNmae: {
        // 手机号
        phone: '',
        carname: '',
        carVIN: ''
      },
      // 已检测中的数据
      activeNameTabB: '1',
      // 车况等级
      // accessGrade: {
      //   facadeGrade: "",
      //   performanceGrade: "",
      //   safetyGrade: "",
      //   trimGrade: "",
      // },
      titleNmaeB: {
        phone: '',
        carname: '',
        carVIN: ''
      },
      infoaa: {
        page: 1,
        size: 10,
        tab: 1
      },
      // 列表框中的数据
      list: [],
      // 数据的总条数
      total: 0,
      error: false,
      loading: false,
      finished: false,
      // 下拉刷新
      laRdfer: false,
      refreshSuccessText: '',
      activeNames: ['1']
    }
  },
  // created() {
  //   this.getAllInfo();
  // },
  methods: {
    async getAllInfo() {
      try {
        const { data } = await goodlist(this.infoaa)
        if (data.length === 0) {
          this.list = []
          // 停止加载
          this.finished = true
        }
        // 如果数组不为0
        console.log(data)
        this.total = data.count
        this.titleDot = data.count
        this.list.push(...data.data)
        // this.list = data.data
        // 加载状态结束
        this.loading = false
        // 如果list的长度大于count，加载结束
        if (this.list.length >= data.count) {
          // 结束加载状态
          this.finished = true
        }
      } catch (err) {
        this.finished = false
        this.loading = true
        this.infoaa.page = 1
        this.list = []
        this.onLoad()
      }
    },
    // 调用onload方法
    onLoad() {
      const timer = setTimeout(() => {
        this.getAllInfo()
        this.infoaa.page++
        this.finished && clearTimeout(timer)
      }, 1000)
    },
    // 下拉刷新
    async onRefresh() {
      try {
        const { data } = await goodlist(this.infoaa)
        console.log(data)
        this.list.unshift(...data.data)
        this.laRdfer = false
        this.refreshSuccessText = `刷新成功，更新了${this.infoaa.size}条数据`
      } catch (err) {
        this.refreshSuccessText = '刷新失败'
        this.laRdfer = false
      }
    },
    clickphone(mobileNumber) {
      window.location.href = 'tel://' + mobileNumber
    },
    // 查看评估报告
    cheackRrpot() {
      this.$router.push('/evaluate')
    },
    // 点击待跟进
    waitClick (businessId1, custIntentId1) {
      // 路由跳转携带参数
      this.$router.push({
        path: '/infoedit',
        query: { businessId: businessId1, custIntentId: custIntentId1 }
      })
    },
    // 点击检测，路由跳转
    ClickDetection() {
      this.$router.push('/result')
    },
    // 调转到评估报告
    clickSigned(item) {
      console.log(item)
      this.$router.push({
        path: '/resulted',
        query: { custIntentId: item.custIntentId, businessId: item.businessId }
      })
    },
    clickcontract() {
      this.$router.push('/signroporte')
    },
    changeTabs(val) {
      this.list = []
      this.infoaa.page = 1
      this.infoaa.tab = val
      this.getAllInfo()
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  margin: 0;
  padding: 0;

  .boxtop {
    position: relative;
    height: 95px;
    width: 100%;
    background-color: #243865;

    .van-nav-bar {
      position: absolute;
      width: 100%;
      bottom: 0;
      background-color: transparent;
      color: #ffff;
      // 搜索的颜色
      /deep/ .van-icon::before {
        color: #ffff;
      }
      // 中间的颜色
      /deep/ .van-nav-bar__title {
        color: #ffff;
      }
    }
    .van-search .van-cell {
      background-color: pink !important;
    }
  }
  // 标题一中的内容
  .CarNumber {
    display: inline-block;
    font-size: 12px;
    color: #666666;
  }
  .Carname {
    display: inline-block;
    font-size: 12px;
    color: #666666;
    margin-left: 20px;
  }
  // 日期提示
  .dataspan {
    display: inline-block;
    margin-left: 5px;
  }
  // 时间
  .dataspan {
    display: inline-block;
    font-size: 14px;
    margin-right: 40px;
  }
  // 提示
  .reminder {
    position: absolute;
    top: 5;
    right: 8px;
    font-size: 13px;
    width: 180px;
    height: 20px;
    border-radius: 10px;
    color: #e1525a;
    background-color: #fceced;
    text-align: center;
  }
  // 红色的圆圈
  .Textcritil {
    position: absolute;
    top: 10px;
    left: 130px;
    width: 10px;
    height: 10px;
    background-color: red;
    margin-top: 7px;
    border-radius: 10px;
    // color: #fff;
  }
}
/deep/ .van-cell__right-icon {
  margin-top: 20px;
}
.boxXian {
  width: 100%;
  height: 80px;
  // background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  .boxNier {
    width: 70px;
    height: 70px;
    border: 1px dashed #64b5f6;
    border-radius: 10px;
    border-width: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
